<template>
  <a-row type="flex" justify="space-between">
    <!-- 左侧 -->
    <a-col>{{ treeNode.name }}</a-col>
    <!-- 右侧 -->
    <a-col :span="6">
      <!-- 靠右对齐 -->
      <a-row type="flex" justify="end">
        <a-col :pull="6">{{ treeNode.manager }}</a-col>
        <a-col>
          <!-- 下拉菜单 -->
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              操作
              <SettingOutlined v-if="isRoot" />
              <DownOutlined v-else />
            </a>
            <!-- 下拉菜单子项 -->
            <template #overlay>
              <a-menu>
                <a-menu-item @click="addDepart()">添加子部门</a-menu-item>
                <a-menu-item @click="editDepart()" v-if="!isRoot">编辑部门</a-menu-item>
                <a-menu-item @click="delDepart(treeNode.id)" v-if="!isRoot"> 删除部门 </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { delDepartment } from '@/api/department'
import { Modal } from 'ant-design-vue'

const props = defineProps({
  //   定义一个props属性
  treeNode: {
    type: Object, // 对象类型
    required: true // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
  },
  isRoot: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['delDepts', 'addDepart', 'editDepart'])

const delDepart = async (id) => {
  // 1. 二次询问
  Modal.confirm({
    title: '确定删除吗?',
    okText: '删除',
    cancelText: '取消',
    async onOk() {
      // 发送请求
      await delDepartment(id)
      // 提示用户
      message.success('删除成功')
      // 更新页面
      emits('delDepts')
    }
  })
}

const addDepart = () => {
  emits('addDepart', props.treeNode)
}

const editDepart = () => {
  emits('editDepart', props.treeNode)
}
</script>
